import styled from 'styled-components';
import React, { CSSProperties, useEffect, useState } from 'react';
import { Table, Space, Card, Drawer, Button } from "antd";
import type { TableColumnsType, TableProps } from 'antd';

import { localSharingGetSharedObject, localSharingSaveSharedObject, SharedObject, sharingGetMySharedObjects } from '../../services';

export interface BindSharedPanelProps {
    style?: CSSProperties;
    objectType: string;
    referId: string;
    onFinish: () => Promise<void> | void;
}

export const BindSharedPanel: React.FC<BindSharedPanelProps> = (props) => {

    const [loading, setLoading] = useState<boolean>(false);

    const [versionOpen, setVersionOpen] = useState<boolean>(false);

    const [sharedObjects, setSharedObjects] = useState<Array<SharedObject>>([]);

    const [selected, setSelected] = useState<SharedObject | null>(null);

    const [page, setPage] = useState<number>(1);

    const [pageSize, setPageSize] = useState<number>(10);

    const [total, setTotal] = useState<number>(0);

    const columns = [
        {
            title: '标识',
            dataIndex: 'identifier',
            key: 'identifier',
            width: '240px',
            ellipsis: true,
        },
        {
            title: '名称',
            dataIndex: 'name',
            key: 'name',
            width: '220px',
            ellipsis: true,
        },
        {
            title: '描述',
            dataIndex: 'description',
            key: 'description',
            ellipsis: true,
        },
    ];

    const request = async (page: number, pageSize: number) => {
        setLoading(true);
        const { total, data } = await sharingGetMySharedObjects({
            object_type: 'DOMAIN'
        }, page, pageSize);
        setSharedObjects(data);
        setTotal(total);
        setLoading(false);
    };

    useEffect(() => {
        request(page, pageSize);
    }, [page, pageSize]);

    const rowSelection: TableProps<SharedObject>['rowSelection'] = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: SharedObject[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
            if (selectedRows && selectedRows.length > 0) {
                setSelected(selectedRows[0]);
            } else {
                setSelected(null);
            }
        },
        getCheckboxProps: (record: SharedObject) => ({
            value: record.identifier,
            name: record.name,
        }),
    };

    return (
        <Container style={props.style}>
            <Buttons>
                <Button style={{ width: '90px' }} loading={loading} disabled={selected === null} type={'primary'}
                    onClick={async () => {
                        if (!selected) return;
                        //
                        setLoading(true);
                        try {
                            let localRes = await localSharingSaveSharedObject(props.objectType, props.referId, selected.identifier);
                            await props.onFinish();
                        } catch (error) {
                            console.error(error);
                        }
                        setLoading(false);
                    }}>关联</Button>
            </Buttons>
            <Table
                rowSelection={{ type: 'radio', ...rowSelection }}
                bordered
                loading={loading}
                rowKey={'identifier'}
                pagination={{
                    showSizeChanger: true,
                    total: total,
                    current: page,
                    pageSize: pageSize,
                    onChange: (page, pageSize) => {
                        setPage(page);
                    },
                    onShowSizeChange: (current, size) => {
                        setPageSize(size);
                    }
                }}
                dataSource={sharedObjects} columns={columns} />
        </Container>
    );
}

const Container = styled.div`
    width: 100%;
    height: 100%;
    padding: 6px 6px;
`;

const Buttons = styled.div`
    width: 100%;
    display: flex;
    justify-content: flex-end;
    padding: 6px 6px;
`;
